<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
    <div class="container-div">
    
    	<div class="col-sm-12 search-collapse">
				<form id="role-form">
					<div class="select-list">
						<ul>
							<li class="select-time">
								<label>筛选日期： </label>
								<input type="text" class="time-input" id="date" placeholder="筛选日期" name="date"/>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm echartjs" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
    
		<div class="col-sm-12 select-table table-striped">
			<table id="bootstrap-table" data-mobile-responsive="true"></table>
		</div>
		
		<div class="col-sm-12" style="background: #fff;border-radius: 6px;margin-top: 10px;">
			<div id="container" style="height: 300px;width: 50%;float:left;"></div>
			<div id="container1" style="height: 300px;width: 50%;float:right;"></div>
		</div>
    </div>
    <div th:include="include :: footer"></div>
    <script th:inline="javascript">
        var prefix = ctx + "data";
        
        layui.use('laydate', function() {
        	var laydate = layui.laydate;
        	laydate.render({
          	  elem: '#date',//指定元素
          	  max:'nowTime',
          	  value:new Date()
          });
        });
        
        $('.echartjs').click(function() {
			/* var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var dom1 = document.getElementById("container1");
            var myChart1 = echarts.init(dom1);
            myChart.clear();
            myChart1.clear(); */
            var date = $("#date").val();
            console.info(date);
			echartDate(date);
		});
        
        function echartDate(date){
        	$.ajax({
                type: 'POST',
                url: prefix + "/bloodList",
                data: {
                	date:date
                },
                cache: false,
                success: function (ret) {
                    var data = ret.rows;
                    console.info(data);
                    var dom = document.getElementById("container");
                    var myChart = echarts.init(dom);
                    var app = {};
                    option = null;
                    option = {
                        xAxis: {
                            type: 'category',
                            data: [data[0].name, data[1].name, data[2].name, data[3].name]
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [data[0].num, data[1].num, data[2].num, data[3].num],
                            type: 'bar'
                        }]
                    };
                    ;
                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }
                    
                    var dom1 = document.getElementById("container1");
                    var myChart1 = echarts.init(dom1);
                    var app1 = {};
                    option1 = null;
                    app1.title = '环形图';

                    option1 = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data:[data[0].name, data[1].name, data[2].name, data[3].name]
                        },
                        series: [
                            {
                                name:'分段类型',
                                type:'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        show: true,
                                        textStyle: {
                                            fontSize: '30',
                                            fontWeight: 'bold'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data:[
                                    {value:data[0].num, name:data[0].name},
                                    {value:data[1].num, name:data[1].name},
                                    {value:data[2].num, name:data[2].name},
                                    {value:data[3].num, name:data[3].name}
                                ]
                            }
                        ]
                    };
                    ;
                    if (option1 && typeof option1 === "object") {
                        myChart1.setOption(option1, true);
                    }
                }
            });
        }
        
        $(function() {
            var options = {
                url: prefix + "/bloodList",
                modalName: "血压统计",
                search: false,
                columns: [{
		            checkbox: true
		        },
				{
					field : 'name', 
					title : '分段名' 
				},
				{
					field : 'num', 
					title : '人次' 
				},
				{
					field : 'percentage', 
					title : '所占比例' 
				}
		        /* {
		            title: '操作',
		            align: 'center',
		            formatter: function(value, row, index) {
		            	var actions = [];
						return actions.join('');
		            }
		        } */
				]
            };
            $.table.init(options);
            var date = $("#date").val();
            echartDate(date);
        });
    </script>
</body>
</html>